<template>
  <a-space>
    <span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>
    <a href="javascript:;" @click="handleDownload">download</a>
    <a href="javascript:;" @click="handleRemove">delete</a>
  </a-space>
</template>
<script lang="ts" name="file-record" setup>
  import { ref, unref, onMounted, onUnmounted, nextTick, watchEffect } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { ImagePreview } from "/@/components/Preview/index"
  import { propTypes } from "/@/utils/propTypes"
  import { Icon } from "/@/components/Icon"

  const { createMessage } = useMessage()
  const emit = defineEmits(["remove", "download"])

  const props = defineProps({
    file: propTypes.object.def({}),
  })

  onUnmounted(() => {
    console.log("onUnmounted-props", unref(props))
  })

  watchEffect(() => {})

  const handleDownload = () => {
    emit("download")
  }

  const handleRemove = () => {
    emit("remove")
  }
</script>

<style lang="less"></style>
